<template>
	<!-- 底部按钮 -->
	<view>
		<view class="footer flex flex_center">
			<view class="btn flex1" @click="funFn('share',data)">
				<iconfont class="icon-prefix" icon="share" :size="18" color="#666666"></iconfont>分享
			</view>
			<view class="btn flex1" @click="funFn('collent',data)">
				<iconfont class="icon-prefix" :icon="isCollected?'collect-filled':'collect'" :size="18" color="#666666">
				</iconfont>{{isCollected?'已收藏':'收藏'}}
			</view>
			<view class="btn flex1" @click="funFn('comment',data)">
				<iconfont class="icon-prefix" icon="comment" :size="18" color="#666666"></iconfont>评价
			</view>
			<view class="btn flex1" @click="funFn('edit',data)">
				<iconfont class="icon-prefix" icon="edit" :size="18" color="#666666"></iconfont>编辑
			</view>
		</view>
		<comment-public :show.sync="showCommentPublic" :data="data"></comment-public>
		<set-model-label :show.sync="showModelLabel" :data="data" :modeltype="modeltype"></set-model-label>

		<view>
			<canvas canvas-id="shareCanvas" class="canvas" bindlongpress="saveImg"
				:style="{height: canvasHeight+'px',width:canvasWidth+'px'}">
			</canvas>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import commentPublic from '../commentPublic/commentPublic.vue'
	import setModelLabel from '../setModelLabel/setModelLabel.vue'
	export default {
		components: {
			commentPublic,
			setModelLabel
		},
		computed: {
			...mapState(['uid'])
		},
		props: {
			data: {
				type: Number
			},
			modeltype: Array,
			imgList: Array,
			videoList: Array,

			// isCollected: {
			// 	type: Boolean,
			// 	default: false,
			// 	required: true
			// }
		},
		data() {
			return {
				isCollected: false,
				showCommentPublic: false, // 是否展示发布评论
				showModelLabel: false, // 是否设置模特标签
				canvasWidth: 800,
				canvasHeight: 0,
			}
		},
		methods: {
			// 底部功能
			funFn(type, id) {
				let that = this,
					uid = that.uid;
				switch (type) {
					case 'share':
						this.manyImgShare()
						break;
					case 'collent':
						that.http.httpRequest('/models/addCollent', 'post', {
							mid: id,
							uid: uid,
						}).then(res => {
							that.isCollected = !that.isCollected;
						})
						break;
					case 'comment':
						this.showCommentPublic = true;

						break;
					case 'edit':

						that.http.httpRequest('/models/getModelsInfo', 'post', {
							mid: id
						}).then(res => {
							if (res.data.data.entered == uid) {

								uni.navigateTo({
									url: '/pages/model/modelPublic/modelPublic?mid=' + id
								})
							} else {
								this.showModelLabel = true;
							}
						})


						break;
				}
			},

			promisify: api => {
				return (options, ...params) => {
					return new Promise((resolve, reject) => {
						const extras = {
							success: resolve,
							fail: reject
						}
						api({
							...options,
							...extras
						}, ...params)
					})
				}
			},
			saveCanvas(imageInfo) {
				uni.showLoading({
					title: "生成图片中，请稍后",
				})
				let that = this;
				const ctx = uni.createCanvasContext('shareCanvas')
				var lastHeight = 0;
				imageInfo.forEach(function(item, index) {
					var height = parseInt(400 / (item.width / item.height));
					lastHeight = height + lastHeight;
				})
				that.canvasHeight = lastHeight;
				console.log(that.canvasHeight);
				that.canvasHeight = lastHeight;
				lastHeight = 0;
				imageInfo.forEach(function(item, index) {
					console.log(item);
					var height = parseInt(400 / (item.width / item.height));
					ctx.drawImage(item.path, 0, lastHeight, 400, height, 0,
						0) //, 600,height,item.width,item.height 
					lastHeight = height + lastHeight;
				})
				ctx.draw(false, () => {
					that.tempFileImage()
				})
			},

			shareClick(imageList) {
				this.canvasWidth = uni.getSystemInfoSync().windowWidth;

				const wxGetImageInfo = this.promisify(uni.getImageInfo)
				let that = this;
				var InfoList = [];
				var imageInfo = [];
				imageList.forEach(function(item, index) {
					uni.getImageInfo({
						src: item,
						success: function(res) {
							imageInfo.push(res);
							if (index == imageList.length - 1) {
								console.log(imageInfo);
								that.saveCanvas(imageInfo);
							}
						},

					})

				})





				return;

				Promise.all([
					// 图片目前只随机找了几张图片，后期可自行替换
					wxGetImageInfo({
						src: imageList[0] // 背景图片
					}),
					wxGetImageInfo({
						src: imageList[1]
					})
				]).then(res => {

					console.log(res);
					const ctx = wx.createCanvasContext('shareCanvas')
					var lastHeight = 0;
					res.forEach(function(item, index) {
						var height = parseInt(400 / (item.width / item.height));
						lastHeight = height + lastHeight;
					})
					that.canvasHeight = lastHeight;
					console.log(that.canvasHeight);
					that.canvasHeight = lastHeight;
					lastHeight = 0;
					res.forEach(function(item, index) {
						console.log(item);
						var height = parseInt(400 / (item.width / item.height));
						ctx.drawImage(item.path, 0, lastHeight, 400, height, 0,
							0) //, 600,height,item.width,item.height 
						lastHeight = height + lastHeight;
					})


					// 作者名称
					// ctx.setTextAlign('center') // 文字居中
					// ctx.setFillStyle('#000000') // 文字颜色：黑色
					// ctx.setFontSize(22) // 文字字号：22px
					// ctx.fillText('作者：张杰', 300 / 2, 100)
					// // 小程序码
					// const qrImgSize = 150
					// ctx.drawImage(res[1].path, (340 - qrImgSize) / 2, 230, qrImgSize, qrImgSize)
					// ctx.stroke()
					// // 绘图生成临时图片
					// console.log('res', res)
					ctx.draw(false, () => {
						that.tempFileImage()
					})
				})
			},
			tempFileImage() {
				let that = this
				uni.canvasToTempFilePath({
					canvasId: 'shareCanvas',
					fileType: 'jpg',
					success: (res) => {
						console.log(res);
						that.savePic(res.path)
						uni.getImageInfo({
							src: res.tempFilePath,
							success: function(res) {
								that.savePic(res.path)
							}
						});

						uni.hideLoading()
					},
					fail: (response) => {
						console.log(response)
					}
				})
			},
			savePic: function(tempFilePath) {
				console.log(tempFilePath);
				this.canvasHeight = 0;

				plus.share.sendWithSystem({
					'type': 'image',
					pictures: [tempFilePath]
				}, function() {
					console.log('分享成功');
				}, function(e) {
					console.log('分享失败：' + JSON.stringify(e));
				})
			},
			shareVideoClick: function(video) {
				console.log("视频分享", video);
				uni.showLoading({
					title: "保存视频中，请稍后",
				})
				// uni.share({
				// 	provider: "weixin",
				// 	type: 4,
				// 	 scene: "WXSceneSession",
				// 	mediaUrl:video[0],
				// 	success(res) {
				// 		console.log("分享结果",res);
				// 	},
				// 	fail(response) {
				// 		console.log(response);
				// 	}
				// })
				// return;
				let that = this;
				uni.downloadFile({
					url: video[0],
					success(res) {
						if (res.statusCode == 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.hideLoading()
									that.$u.toast('视频已保存到相册，可自行选择发送');
								},
								fail: function() {
									uni.hideLoading()
									that.$u.toast('视频保存失败');
								}
							});
							uni.hideToast();

						} else {
							console.log("保存失败");
						}
					}
				})
				uni.getVideoInfo({
					src: video[0],
					success(res) {
						console.log(res);
						return;

					},
					fail(response) {
						console.log(response);
					}
				})

			},
			// 分享图片
			manyImgShare() { // 模拟要分享的图片数据

				//return;
				let newimg = [];
				for (var i = 0; i < this.imgList.length; i++) {
					if (this.imgList[i].checked == true) {
						newimg.push(this.imgList[i].url);


					}
				}

				let newvideo = [];
				for (var a = 0; a < this.videoList.length; a++) {
					if (this.videoList[a].checked == true) {
						newvideo.push(this.videoList[a].url);


					}
				}
				if (newvideo.length == 0 && newimg.length == 0) {
					this.$u.toast('请选择分享内容');
					return
				}
				if (newvideo.length > 0 && newimg.length > 0) {
					this.$u.toast('图片和视频不能一起分享');
					return
				}
				var ctx = uni.createCanvasContext("shareCanvas", this);
				let that = this;
				//分享图片
				if (newimg.length > 0) {
					this.shareClick(newimg);
				}
				//分享视频
				else {
					this.shareVideoClick(newvideo);
				}
				return;



				let list = newimg;
				let urls = {};
				urls.type = 'image'
				urls.pictures = newimg,
					urls.extra = {
						scene: "WXSceneSession"
					}
				// for (let i = 0; i < list.length; i++) {
				// 	let [, imgPath] = await uni.downloadFile({
				// 		url: list[i]
				// 	})
				// 	urls.pictures.push(imgPath.tempFilePath)
				// }
				// console.log(urls) //
				// 讲urls传入  调用系统分享 拉起微信 分享给好友
				plus.share.sendWithSystem(urls, function() {
					console.log('分享成功');
				}, function(e) {
					console.log('分享失败：' + JSON.stringify(e));
				})
			},
		}
	}
</script>

<style lang="scss">
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 99upx;
		color: #666;
		border-top: solid 1upx #eee;
		background-color: #fff;
		z-index: 2;

		.btn {
			text-align: center;
			border-right: 1px solid #c1c1c1;

			&:last-child {
				border-right-width: 0;
			}
		}
	}
</style>
